<template>
  <PageWrapper title="">
    <vxe-grid ref='xGrid' v-bind="gridOptions"
    @checkbox-change="checkboxChange"
    @checkbox-all="checkboxAll">
      <template #toolbar_buttons>
        <vxe-button icon="vxe-icon--plus" @click="showDrawer = true">新增</vxe-button>
        <popconfirm
          placement="top"
          title="慎重！批量删除【选中的数据】吗?"
          ok-text="删除"
          cancel-text="取消"
          :disabled="deleteAllShow"
          @confirm="deleteAll">
          <vxe-button icon="vxe-icon--close" status="danger" :disabled="deleteAllShow">批量删除</vxe-button>
        </popconfirm>
        <vxe-button icon="vxe-icon--d-arrow-right" status="info" @click="setAllTreeExpand">展开/收起</vxe-button>
      </template>
      <template #operate="{ row }">
        <vxe-button status="primary" icon="vxe-icon--edit-outline" title="编辑" circle
                    @click="clickEdit(row)"></vxe-button>
        <popconfirm
          placement="topRight"
          title="提示！确定复制【菜单】吗?"
          ok-text="复制"
          cancel-text="取消"
          @confirm="copyOne(row)">
          <vxe-button status="info" icon="vxe-icon--zoomout" title="复制" circle></vxe-button>
        </popconfirm>
        <popconfirm
          placement="topRight"
          title="慎重！确定删除【单行数据】吗?"
          ok-text="删除"
          cancel-text="取消"
          @confirm="deleteOne([row.id])">
          <vxe-button status="danger" icon="vxe-icon--close" title="删除" circle></vxe-button>
        </popconfirm>
      </template>
    </vxe-grid>

    <Drawer :show="showDrawer" :is-update="isUpdate"
            :row="row"
            @success="handleSuccess"
            @on-drawer-close="onDrawerClose"/>
  </PageWrapper>
</template>
<script lang="ts" name="Menu" setup>
import {reactive, ref, toRaw, watch} from 'vue';
import {PageWrapper} from '/@/components/Page';
// import Drawer from './Drawer.vue';
import {columns} from './data';
import {SizeType, VxeGridProps} from 'vxe-table'
import {Popconfirm} from 'ant-design-vue';
import {getTableData, getListData, deletes, create} from '/@/api/admin/menu';
import Drawer from './Drawer.vue';

const xGrid = ref()
const size = ref<SizeType>('mini')
const allExpand = ref(true)
const setAllTreeExpand = () => {
  allExpand.value = !allExpand.value
  xGrid.value.setAllTreeExpand(allExpand.value)
}
const gridOptions = reactive<VxeGridProps>({
  border: true,
  resizable: true,
  showHeaderOverflow: true,
  showOverflow: true,
  highlightHoverRow: true,
  keepSource: true,
  stripe: true,
  id: 'xGrid1',
  height: window.innerHeight-113,
  size: size.value,
  rowId: 'id',
  columns: columns,
  // data: [],
  columnConfig: {
    isCurrent: true,
    isHover: true,
  },
  rowConfig: {
    useKey: true,
    isCurrent: true,
    isHover: false,
  },
  customConfig: {
    storage: true,
  },
  sortConfig: {
    trigger: 'cell',
    remote: false
  },
  filterConfig: {
    remote: false
  },
  toolbarConfig: {
    refresh: true,
    import: false,
    export: false,
    print: false,
    zoom: true,
    custom: true,
    slots: {
      buttons: 'toolbar_buttons',
    },
  },
  exportConfig: {
    remote: false,
    types: ['csv'],
    modes: ['current', 'selected', 'all'],
    // exportMethod({options}) {
    //   const $grid = xGrid.value
    // }
  },
  checkboxConfig: {
    // labelField: 'id',
    reserve: true,
    highlight: true,
    range: false,
    trigger: 'cell',
  },
  treeConfig: {
    rowField: 'id',
    trigger: 'cell',
    line: true,
    expandAll: true,
  },
  proxyConfig: {
    ajax: {
      query({ page, sort, sorts, filters, form }) {
        // return getTableData(page)
        deleteAllShow.value = true
        return getListData()
      }
    }
  },
});

const deleteOne = (params: []) => {
  deletes(params).then(() => {
    deleteAllShow.value = true
    handleSuccess()
  })
}
const deleteAll = () => {
  let checkedList = xGrid.value.getCheckboxRecords(true).map(e => e.id)
  deleteOne(checkedList)
}

const deleteAllShow = ref(true)
const checkboxChange = ({ checked, row, rowIndex, $rowIndex, column, columnIndex, $columnIndex, $event }) => {
  deleteAllShow.value = !checked
}
const checkboxAll = ({ checked, $event }) => {
  deleteAllShow.value = !checked
}

const copyOne = (row:any) => {
    let data = toRaw(row)
    data.id = null
    data.path = '/'+new Date().getTime()
    data.name = '/'+new Date().getTime()
    data.metaId = null
    data!.meta!.id = null
    console.log(data)
    create(data).then(() => {
      handleSuccess()
    })
}

const showDrawer = ref(false)
const isUpdate = ref(false)
const row = ref();
const handleSuccess = () => {
  getTableData(null).then(dd => {
    xGrid.value.loadData(dd)
    let {pager} = xGrid.value.getProxyInfo()
    pager.total = dd?.page?.total
  })
}
const onDrawerClose = () => {
  showDrawer.value = false
  isUpdate.value = false
  row.value = null
}

const clickEdit = (row_:any) => {
  showDrawer.value = true
  isUpdate.value = true
  row.value = row_
}
</script>
